<template>
  <div class="w-full h-32 pl-10 pr-10">
    <CollapseContainer class="mt-5" title="效果展示">
      <!-- @click 直接绑定 useDrawer 暴露的方法即可。如果想做一些额外的逻辑，可以再套一层方法 -->
      <a-button type="primary" class="mt-4 mb-4" @click="openDrawer"> 新增表单抽屉 </a-button>

      <!-- 任意位置，引入自定义组件: 父组件也可以通过 @ok 方式注册方法，监听组件点击 ok 按钮 -->
      <DrawerFormInsert @register="register" @ok="listenClickOk" />

      <div>
        <p>适用场景: 表单页 </p>
        <ul>
          <li>左上角无关闭按钮: 设置 :closable="false"</li>
          <li>取消点击遮罩层关闭，防止误触: 设置 :maskClosable="false"</li>
          <li>显示底部 取消、确定按钮, 只允许点底部按钮关闭: 设置 showFooter</li>
          <li>自定义底部按钮文字: okText="确定按钮"、cancelText="取消按钮"</li>
          <li>自定义确定方法, 确定方法中关闭抽屉: @ok="clickOk"</li>
          <li>【选】关闭时清空组件: :destroyOnClose="false"</li>
        </ul>
      </div>
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';

  // vben Drawer 组件
  import { useDrawer } from '@/components/Drawer';

  // 自定义 Drawer 组件
  import DrawerFormInsert from './DrawerFormInsert.vue';

  // register 绑定 modal 组件, openModal 方法用于显示弹窗
  const [register, { openDrawer }] = useDrawer();

  function listenClickOk() {
    alert('抽屉已关闭，可做刷新操作了');

    return true;
  }
</script>

<script lang="ts">
  function getDoc() {
    return `


#### 父组件

\`\`\`html
\<template\>
    <!-- @click 直接绑定 useDrawer 暴露的方法即可。如果想做一些额外的逻辑，可以再套一层方法 -->
    <a-button type="primary" class="mt-4 mb-4" @click="openDrawer"> 简单抽屉 </a-button>

    <!-- 任意位置，引入弹窗组件 -->
    <DrawerFormInsert @register="register" />
\</template\>

\<script lang="ts" setup\>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';

  // vben Drawer 组件
  import { useDrawer } from '@/components/Drawer';

  // 自定义 Drawer 组件
  import DrawerFormInsert from './DrawerFormInsert.vue';

  // register 绑定 modal 组件, openModal 方法用于显示弹窗
  const [register, { openDrawer }] = useDrawer();

  function listenClickOk() {
    alert('抽屉已关闭，可做刷新操作了');

    return true;
  }
\</script\>

\`\`\`

### DrawerFormInsert 组件
\`\`\`html

<template>
  <!-- 子组件必须添加 v-bind="$attrs",  通过父传孙的方式传递给 antd 的原生组件中 -->
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    @ok="clickOk"
    title="监听抽屉关闭"
    width="40%"
    showFooter
    :closable="false"
    :maskClosable="false"
    okText="确定按钮"
    cancelText="取消按钮"
    :destroyOnClose="false"
  >

</template>

\<script lang="ts" setup\>
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';

  // register 绑定组件, closeModal: 关闭弹窗, setModalProps: 设置窗口参数
  const [register, { closeDrawer }] = useDrawerInner();

  // 点击确定按钮
  function clickOk() {
    // 需要显示关闭抽屉
    closeDrawer();
  }
\</script\>
\`\`\`


`;
  }
</script>
